<template>
  <el-dialog
    v-model="visible"
    title="选择布局模板"
    width="800px"
    :before-close="handleClose"
  >
    <div class="template-selector">
      <div class="template-grid">
        <div
          v-for="template in templates"
          :key="template.id"
          class="template-item"
          :class="{ 'template-selected': selectedTemplate?.id === template.id }"
          @click="selectTemplate(template)"
        >
          <div class="template-preview">
            <div class="preview-layout">
              <div
                v-for="(component, index) in template.layout"
                :key="index"
                class="preview-component"
                :class="`component-${component.type}`"
                :style="{
                  gridColumn: component.gridColumn || 'span 1',
                  gridRow: component.gridRow || 'span 1'
                }"
              >
                <div class="component-icon">
                  <el-icon>
                    <component :is="getComponentIcon(component.type)" />
                  </el-icon>
                </div>
                <span class="component-name">{{ component.title }}</span>
              </div>
            </div>
          </div>
          
          <div class="template-info">
            <h4 class="template-title">{{ template.name }}</h4>
            <p class="template-description">{{ template.description }}</p>
            <div class="template-tags">
              <el-tag
                v-for="tag in template.tags"
                :key="tag"
                size="small"
                type="info"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
          
          <div v-if="selectedTemplate?.id === template.id" class="template-selected-indicator">
            <el-icon><Check /></el-icon>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="template-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="applyTemplate" :disabled="!selectedTemplate">
          应用模板
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { 
  Check,
  User,
  DataAnalysis,
  TrendCharts,
  Operation,
  List,
  Bell
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'apply-template'])

const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const selectedTemplate = ref(null)

// 预设模板配置
const templates = ref([
  {
    id: 'default',
    name: '默认布局',
    description: '经典的仪表盘布局，包含所有核心组件',
    tags: ['经典', '全面'],
    layout: [
      {
        id: 'welcome-1',
        type: 'welcome',
        title: '欢迎信息',
        visible: true,
        gridColumn: 'span 2',
        order: 0
      },
      {
        id: 'overview-1',
        type: 'overview',
        title: '数据概览',
        visible: true,
        gridColumn: 'span 2',
        order: 1
      },
      {
        id: 'chart-1',
        type: 'chart',
        title: '销售趋势',
        visible: true,
        gridColumn: 'span 2',
        order: 2
      },
      {
        id: 'quickActions-1',
        type: 'quickActions',
        title: '快捷操作',
        visible: true,
        gridColumn: 'span 1',
        order: 3
      },
      {
        id: 'todo-1',
        type: 'todo',
        title: '待办事项',
        visible: true,
        gridColumn: 'span 1',
        order: 4
      },
      {
        id: 'activity-1',
        type: 'activity',
        title: '最新动态',
        visible: true,
        gridColumn: 'span 2',
        order: 5
      }
    ]
  },
  {
    id: 'executive',
    name: '管理者视图',
    description: '专为管理层设计，突出关键指标和趋势分析',
    tags: ['管理', '分析'],
    layout: [
      {
        id: 'overview-1',
        type: 'overview',
        title: '核心指标',
        visible: true,
        gridColumn: 'span 2',
        order: 0
      },
      {
        id: 'chart-1',
        type: 'chart',
        title: '业绩趋势',
        visible: true,
        gridColumn: 'span 2',
        order: 1
      },
      {
        id: 'chart-2',
        type: 'chart',
        title: '财务分析',
        visible: true,
        gridColumn: 'span 2',
        order: 2
      },
      {
        id: 'activity-1',
        type: 'activity',
        title: '重要动态',
        visible: true,
        gridColumn: 'span 2',
        order: 3
      }
    ]
  },
  {
    id: 'operational',
    name: '运营视图',
    description: '专注日常运营，快捷操作和任务管理',
    tags: ['运营', '效率'],
    layout: [
      {
        id: 'welcome-1',
        type: 'welcome',
        title: '工作台',
        visible: true,
        gridColumn: 'span 1',
        order: 0
      },
      {
        id: 'quickActions-1',
        type: 'quickActions',
        title: '快捷操作',
        visible: true,
        gridColumn: 'span 1',
        order: 1
      },
      {
        id: 'todo-1',
        type: 'todo',
        title: '今日任务',
        visible: true,
        gridColumn: 'span 1',
        order: 2
      },
      {
        id: 'overview-1',
        type: 'overview',
        title: '运营数据',
        visible: true,
        gridColumn: 'span 1',
        order: 3
      },
      {
        id: 'activity-1',
        type: 'activity',
        title: '系统动态',
        visible: true,
        gridColumn: 'span 2',
        order: 4
      }
    ]
  },
  {
    id: 'minimal',
    name: '简约视图',
    description: '简洁明了，只显示最重要的信息',
    tags: ['简约', '专注'],
    layout: [
      {
        id: 'welcome-1',
        type: 'welcome',
        title: '欢迎',
        visible: true,
        gridColumn: 'span 2',
        order: 0
      },
      {
        id: 'overview-1',
        type: 'overview',
        title: '关键指标',
        visible: true,
        gridColumn: 'span 2',
        order: 1
      },
      {
        id: 'quickActions-1',
        type: 'quickActions',
        title: '快捷操作',
        visible: true,
        gridColumn: 'span 2',
        order: 2
      }
    ]
  },
  {
    id: 'analytics',
    name: '分析视图',
    description: '数据分析师专用，多图表展示',
    tags: ['分析', '图表'],
    layout: [
      {
        id: 'overview-1',
        type: 'overview',
        title: '数据总览',
        visible: true,
        gridColumn: 'span 2',
        order: 0
      },
      {
        id: 'chart-1',
        type: 'chart',
        title: '销售分析',
        visible: true,
        gridColumn: 'span 1',
        order: 1
      },
      {
        id: 'chart-2',
        type: 'chart',
        title: '用户分析',
        visible: true,
        gridColumn: 'span 1',
        order: 2
      },
      {
        id: 'chart-3',
        type: 'chart',
        title: '财务分析',
        visible: true,
        gridColumn: 'span 1',
        order: 3
      },
      {
        id: 'chart-4',
        type: 'chart',
        title: '运营分析',
        visible: true,
        gridColumn: 'span 1',
        order: 4
      }
    ]
  }
])

// 获取组件图标
const getComponentIcon = (type) => {
  const iconMap = {
    welcome: User,
    overview: DataAnalysis,
    chart: TrendCharts,
    quickActions: Operation,
    todo: List,
    activity: Bell
  }
  return iconMap[type] || DataAnalysis
}

// 选择模板
const selectTemplate = (template) => {
  selectedTemplate.value = template
}

// 应用模板
const applyTemplate = () => {
  if (selectedTemplate.value) {
    emit('apply-template', selectedTemplate.value)
    ElMessage.success(`已应用 ${selectedTemplate.value.name} 模板`)
    handleClose()
  }
}

// 关闭对话框
const handleClose = () => {
  selectedTemplate.value = null
  visible.value = false
}
</script>

<style scoped>
.template-selector {
  padding: 0;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
  max-height: 500px;
  overflow-y: auto;
}

.template-item {
  position: relative;
  border: 2px solid var(--el-border-color-light);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--el-bg-color);
}

.template-item:hover {
  border-color: var(--el-color-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.template-selected {
  border-color: var(--el-color-primary);
  background: var(--el-color-primary-light-9);
}

.template-preview {
  margin-bottom: 12px;
}

.preview-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  height: 120px;
  background: var(--el-bg-color-page);
  border-radius: 4px;
  padding: 8px;
}

.preview-component {
  background: var(--el-color-primary-light-8);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--el-color-primary);
  border: 1px solid var(--el-color-primary-light-5);
}

.component-icon {
  font-size: 14px;
  margin-bottom: 2px;
}

.component-name {
  font-size: 8px;
  text-align: center;
  line-height: 1;
}

.template-info {
  margin-bottom: 12px;
}

.template-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.template-description {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: var(--el-text-color-regular);
  line-height: 1.4;
}

.template-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.template-selected-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--el-color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}

.template-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--el-border-color-light);
}

/* 组件类型特定样式 */
.component-welcome {
  background: var(--el-color-success-light-8);
  border-color: var(--el-color-success-light-5);
  color: var(--el-color-success);
}

.component-overview {
  background: var(--el-color-primary-light-8);
  border-color: var(--el-color-primary-light-5);
  color: var(--el-color-primary);
}

.component-chart {
  background: var(--el-color-warning-light-8);
  border-color: var(--el-color-warning-light-5);
  color: var(--el-color-warning);
}

.component-quickActions {
  background: var(--el-color-info-light-8);
  border-color: var(--el-color-info-light-5);
  color: var(--el-color-info);
}

.component-todo {
  background: var(--el-color-danger-light-8);
  border-color: var(--el-color-danger-light-5);
  color: var(--el-color-danger);
}

.component-activity {
  background: var(--el-color-success-light-8);
  border-color: var(--el-color-success-light-5);
  color: var(--el-color-success);
}

:deep(.el-dialog__header) {
  padding: 16px 20px;
  border-bottom: 1px solid var(--el-border-color-light);
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-dialog__footer) {
  padding: 16px 20px;
  border-top: 1px solid var(--el-border-color-light);
}
</style>